The Purpose of Starting an Initial Comment with /*! in JavaScript and CSS Files

The purpose of starting an initial comment with /*! in javascript and css files

It tells compression tools such as the YUICompressor and Uglify, which minify the code, to leave the commented section in place as they usually remove all comments from the code.

JS libraries: what's with the exclamation point in the comment block?

As far as I can see, it's just a marker that javascript minifiers look for, so they don't strip the comment. There is no particular meaning to it.

What does mean /*! some url or text */ in css

The exclamation mark is to keep an comment important . This comment will not be deleted while compressing. This is important e.g. for keep a licence in a CSS file after compressing. Uglify or YUICompressor will keep that comment after compressing.

/*! important comment will not be deleted while compressing */ 

Gulp- Make sure file has comments in the beginning

By using the regex provided by @Sajjad in previous answer. I have managed to achieve my goal. I have used gulp-if and gulp-fail instead (I find it more flexible).

Here is how I do that:

var condition = function (file) {
    sFile = require('path').parse(file.path).name;
    var startWithComment = file.contents.toString().replace(/\n|\r/g, "").trim().startsWith("/*");
    return (!startWithComment);
}

gulp.task('taskName',
    function() {
        gulp.src('files/*.js')
            .pipe(gulpIf(condition, fail(function () {
                var message = 'Some message';
                return message;
            })));
    });

What's the correct way to write comments in attributes such as 'style' and 'onclick'?

The syntax of the style attribute is essentially the same as CSS files. So the comment syntax is the same as in CSS, which is /* ... */

The syntax of onEVENT attributes is Javascript. Javascript has two types of comments: // that comments until the end of the line, and /* ... */ that encloses comments. If the onEVENT attribute is a single line, if you use // it will comment the rest of the attribute. If you want to end the comment earlier, use /* ... */. You can also have newlines in an onEVENT attribute; then the // comment will only last to the newline.

Example:

<div id="foo" onclick="alert('foo'); // comment */; alert('bar');">
    // comment
</div>
<div id="bar" onclick="alert('foo'); /* comment */ alert('bar');">
    /* */ comment
</div>
<div id="foobar" onclick="alert('foo'); // comment
alert('bar')">
    // comment multi-line
</div>

In // comment, the second alert() is commented out. In /* */ comment, both alerts execute. Also, both alerts execute in // comment multi-line.
Amazingly, the SO code highlighter gets this right!

FIDDLE

Creating multiline strings in JavaScript

Update:

ECMAScript 6 (ES6) introduces a new type of literal, namely template literals. They have many features, variable interpolation among others, but most importantly for this question, they can be multiline.

A template literal is delimited by backticks:

var html = `
  <div>
    <span>Some HTML here</span>
  </div>
`;

(Note: I'm not advocating to use HTML in strings)

Browser support is OK, but you can use transpilers to be more compatible.

---

Original ES5 answer:

Javascript doesn't have a here-document syntax. You can escape the literal newline, however, which comes close:

"foo \
bar"

---

Related Topics